<template>
    <div class="import_info">
        <a-form layout="inline">
            <a-form-item label="导入模式">
                <a-select v-model:value="form.importModel" class="import_model" @change="handleChangeModel">
                    <a-select-option v-for="item in importModelList" :key="item.key" :value="item.key">
                        {{ item.name }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item v-show="isShowKeyField" label="更新关键字段">
                <a-tree-select
                    v-model:value="form.keyField"
                    class="import_model"
                    allow-clear
                    multiple
                    :field-names="{
                        children: 'children',
                        title: 'title',
                        key: 'dataIndex',
                        value: 'dataIndex'
                    }"
                    :max-tag-count="maxTagCount"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="currentFormColumns"
                    placeholder="请选择"
                />
            </a-form-item>
        </a-form>
        <div class="down_info">
            <p>为保证数据导入顺利，请下载>> <span class="down" @click="downTemplate">标准模板</span></p>
            <!-- eslint-disable vue/no-v-html -->
            <div
                ><p>支持2M以内的xls,xlsx格式文件</p><p>文件中数据不能超过50000行、200列</p><p>子表单明细同样占用行数</p
                ><p
                    >日期字段：在通过Excel导入日期数据时，只要符合以下情况都能识别日期事件格式。在Excel中设置了单元格格式为“日期”,或符合标准日期格式的字符串</p
                ><p
                    >复选框和下拉复选框：可以在一个字段中录入多个值，以英文逗号（即半角逗号）隔开复选框的不同选项</p
                ></div
            >
        </div>
        <upload-file ref="uploadFile" @change="handleUploadChange" />
    </div>
</template>

<script>
    import UploadFile from '@/components/table/UploadFile.vue'
    import { computed, defineComponent, reactive, ref, watch } from 'vue'
    import { isEmptyArr, isNullOrEmpty, deepCopy } from '@/utils/index'
    export default defineComponent({
        name: 'FormImport',
        components: {
            UploadFile
        },
        props: {
            columns: {
                type: Array,
                default: () => {
                    return []
                }
            },
            pageId: {
                type: Number,
                default: () => {
                    return 0
                }
            },
            dataSourceName: {
                type: String,
                default: () => {
                    return ''
                }
            },
            downloadExcel: {
                type: Function
            },
            downImportTemplate: {
                type: Function
            }
        },
        emits: ['changeUpload'],
        setup(props, { emit }) {
            const uploadFile = ref(null)
            const maxTagCount = 2 // 多选树最多显示数量
            const isShowKeyField = ref(true)
            const form = reactive({
                file: '',
                importModel: 'UPDATE',
                keyField: []
            })
            const importModelList = ref([
                // 导入模式
                { name: '仅更新', key: 'UPDATE' },
                { name: '仅新增', key: 'ADD' },
                { name: '新增并更新', key: 'ADD_AND_UPDATE' }
            ])
            const noCloumn = ['sequenceNumber', 'operation']
            const currentFormColumns = computed(() => {
                const dataList = deepCopy(props.columns)
                return dataList
                    .filter(item => !noCloumn.includes(item.dataIndex))
                    .map(item => ({
                        dataIndex: item.dataIndex,
                        title: item.title,
                        children: item.children,
                        disabled: !(isNullOrEmpty(item.children) || isEmptyArr(item.children))
                    }))
            })
            watch(
                () => form,
                newValue => {
                    emit('changeUpload', newValue)
                },
                { deep: true }
            )
            // 导入模式更改
            const handleChangeModel = value => {
                isShowKeyField.value = !(value === 'ADD')
            }
            // 清空表单
            const clearForm = () => {
                form.file = ''
                form.importModel = 'UPDATE'
                form.keyField = []
                isShowKeyField.value = true
                uploadFile.value.fileList = []
            }
            // 下载导入模板
            const downTemplate = () => {
                props.downImportTemplate(props.pageId).then(res => {
                    props.downloadExcel(res, props.dataSourceName)
                })
            }
            // 上传文件
            const handleUploadChange = file => {
                form.file = file
            }
            return {
                importModelList,
                form,
                maxTagCount,
                isShowKeyField,
                currentFormColumns,
                handleChangeModel,
                downTemplate,
                handleUploadChange,
                clearForm
            }
        }
    })
</script>

<style lang="less" scoped>
    .import_info {
        width: 100%;
    }
    .import_info .down_info {
        width: 100%;
        margin: 20px 0px;
    }
    .import_info .down_info :deep(p) {
        padding-left: 20px;
        position: relative;
    }

    .import_info .down_info :deep(p::after) {
        content: '.';
        font-size: 30px;
        color: #000;
        left: 0px;
        top: -15px;
        position: absolute;
        line-height: 30px;
    }

    .import_info .import_model {
        min-width: 120px;
        max-width: 300px;
    }

    .import_info .down {
        cursor: pointer;
        color: rgb(15, 170, 23);
    }
</style>
